React Flightって何なのか分からんので追いかける

from Server Actions

react側にはどんな感じで書かれてるの?

全然分からん

React Flightと同様に、fixtures/flight内にいくつかそれっぽい単語は見える

enableFormActions

enableAsyncActions

これは設定のフラグっぽい

https://github.com/facebook/react/blob/8ec962d825fc948ffda5ab863e639cd4158935ba/fixtures/flight/src/index.js

createFromFetchのcallServerが怪しい

つまりreact-server-dom-webpackの方に実現するための何かが入ってる可能性がある

callServerはreact-clientにわたされてた

https://github.com/facebook/react/blob/8ec962d825fc948ffda5ab863e639cd4158935ba/packages/react-server-dom-webpack/src/ReactFlightDOMClientBrowser.js#L38

react-client

https://github.com/facebook/react/tree/8ec962d825fc948ffda5ab863e639cd4158935ba/packages/react-client

react-serverがたぶんRSC関連のserverの実装だったはず

なのでreact-clientはそれのclient側だろう

一旦ここまで。分からん

callServerってのがそもそもRSCの機能の一種か

@dai_shi: callServer is a RSC feature used in Wakuwork. Check out the working example: https://t.co/IW3bQAdQY4

React provides such a feature in React Server Components, and Wakuwork implements it in a framework.

https://pbs.twimg.com/media/FrRBMUFaEAA98gZ.jpg

@dan_abramov: @jutanium @BHolmesDev i think you do need it! server component output can be refetched (manually, after mutation, or after navigation). you want React to know the keys so it can reorder items when needed :)

このスレッド内

callServerはcreateFromFetch内に渡すが

ここでserver actionを実際どうやってサーバに問い合わせるかを定義するのだろう

server actionの呼び出しは、クライアントサイドではこのcallServerに対してidを渡して呼び出すような形に書き換わるのだろう

react flight にreply　(server/client)といった概念がありそう

react flightの、あのjson streamのアレのことをreplyと呼んでいるぽい？

https://github.com/facebook/react/blob/8ec962d825fc948ffda5ab863e639cd4158935ba/packages/react-server/src/ReactFlightReplyServer.js#L375

@はpromise

Sはsymbol

F はserver reference

Kはfromdata

I infinity

processReply

https://github.com/facebook/react/blob/8ec962d825fc948ffda5ab863e639cd4158935ba/packages/react-client/src/ReactFlightReplyClient.js#L132

なんとなく、serer actionはこのような変換が行われそう

server module側のidをcreateServerReferenceに渡して、できたserverActionを実行するとサーバにRPCしてくれそう

code:js

const serverAction = ReactServerDOMClient.createServerReference(

ServerModule.$$id,

);

https://github.com/facebook/react/blob/8ec962d825fc948ffda5ab863e639cd4158935ba/packages/react-client/src/ReactFlightReplyClient.js#L459

やっぱり、createServerReferenceが作った関数を叩くと、callServerが呼ばれてる

callServer内で、fetchして、そのresponseをcreateFromFetchに渡してる

@unstubbable: @uryga5 @dan_abramov @BHolmesDev @jutanium The closures are transformed to exports, that are then referenced with their export name in the react server manifest, so that they can be imported when the client calls back. See input and output in this unit test fixture: https://t.co/wyKXUQHPL2

RSCとは、server client間でReactNodeを受け渡しできるようにすることで、

サーバコンポーネントのレンダリングとは、関数コンポーネントの呼び出しに過ぎない

そもそもRSCの仕組み自体の中に、RPCの仕組みが包含されているとみなせる

当然ReactNodeが持つ何らかのJSの値があり、それをserializeしている

なので、コンポーネントに限らず関数呼び出しは原理的に可能

せいぜい、その参照をどう表現するのか、ビルド時にどうやってidを渡すのか、といった違いがあるだけ

これがreactのserer actionの実態だと思ってよかろう

よって、RSCを許容するなら、自動的にactionも許容するのと同じことになる

サーバとクライアントでの受け渡しのために、受け渡す対象がシリアライズできるかどうかがポイントになる

で、それはRSCのときにも考えることだ

rfcsにも、サーバコンポーネントについては書いてあるが、アクションに関しては書かれていない

実装を読むしか無い

ただし、Next.jsにおけるrevalidateTag等は、返り値としてrevalidateによって更新されたRSCがクライアントに返ってくる

同じ関数呼び出し内で

なので、特定の関数呼び出し中に発火した何らかの差分をまとめてレスポンスに返す、といった挙動はNext.js内には含まれているだろう